<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>抱团员工端</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
  <meta name="keywords" content="抱团">
  <meta name="description" content="抱团">
  <script type='text/javascript' src="../common/js/base.js" charset="UTF-8"></script>
  <link rel="stylesheet" type="text/css" href="../common/css/theme-chalk/index.css">
  <link rel="stylesheet" type="text/css" href="../common/css/animate.min.css">
  <link rel="stylesheet" type="text/css" href="../common/css/nanoscroller.css">
  <link rel="stylesheet" type="text/css" href="../common/css/swiper-bundle.min.css">
  <link rel="stylesheet" type="text/css" href="../common/css/base.css">
  <link rel="stylesheet" type="text/css" href="css/style_mobile.css">
  <script type='text/javascript' src="../common/js/jquery.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/jquery.easing.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/html2canvas.min.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/layer/layer.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/wow.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/vue.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/vue-resource.js" charset="UTF-8"></script>
  <script type="text/javascript" src="../common/js/axios.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/elementui.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/jquery.nanoscroller.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/swiper.animate.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/swiper-bundle.min.js" charset="UTF-8"></script>
  <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="page activity hasmenu" id="app">
  <div class="topNav">
    <div :class="{active:tab_index==1}" @click="tabChange(1)">未活动商家</div>
    <div :class="{active:tab_index==2}" @click="tabChange(2)">活动商家</div>
  </div>
  <!-- tips -->
  <div class="zctips">共<span> {{count}} </span>个商家</div>
  <div class="list" v-if="tab_index==1">
    <div class="item" v-for="activity in list">
      <div class="line">
        <div class="des">商家名称：</div>
        <div class="des_">{{activity.name}}</div>
      </div>
      <div class="line sp">
        <div class="box">
          <div class="des">联系人：</div>
          <div class="des_"> {{activity.contact}}</div>
        </div>
        <div class="box">
          <div class="des">联系电话：</div>
          <div class="des_">{{activity.mobile}}</div>
        </div>
      </div>
      <div class="line sp">
        <div class="box">
          <div class="des">商家类型：</div>
          <div class="des_">{{activity.type}}</div>
        </div>
        <div class="box">
          <div class="des">活动次数：</div>
          <div class="des_">{{activity.product_count}}</div>
        </div>
      </div>
      <div class="line">
        <div class="des">最后一次活动结束时间：</div>
        <div class="des_">{{activity.last_product_online_time || '未举办过活动'}}</div>
      </div>

    </div>

  </div>
  <div class="list" v-if="tab_index==2">
    <div class="item" v-for="activity in list">
      <div class="line">
        <div class="des">商家名称：</div>
        <div class="des_">{{activity.name}}</div>
      </div>
      <div class="line sp">
        <div class="box">
          <div class="des">联系人：</div>
          <div class="des_">{{activity.contact}}</div>
        </div>
        <div class="box">
          <div class="des">联系电话：</div>
          <div class="des_">{{activity.mobile}}</div>
        </div>
      </div>
      <div class="line sp">
        <div class="box">
          <div class="des">签约时间：</div>
          <div class="des_">{{activity.create_date}}</div>
        </div>
        <div class="box">
          <div class="des">活动次数：</div>
          <div class="des_">{{activity.product_count}}</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="indexbotmenu">
    <a href="./userIndex.html" class="item">
        <div class="img"><img src="images/index-botmenu-ico1.png" alt=""></div>
        <p>首页</p>
    </a>
    <a href="./profits.html" class="item">
        <div class="img"><img src="images/index-botmenu-ico2.png" alt=""></div>
        <p>收益</p>
    </a>
<!--    <a href="./pc_add_active.html" class="item">-->
<!--        <div class="img"><img src="images/index-botmenu-ico3.png" alt=""></div>-->
<!--        <p>添加活动</p>-->
<!--    </a>-->
    <a href="./activity.html" class="item">
        <div class="img"><img src="images/index-botmenu-ico4-select.png" alt=""></div>
        <p>商家</p>
    </a>
</div>
</body>
<script>
  $(function () {
    new Vue({
      el: '#app',
      data() {
        return {
          tab_index: 1,
          page: 1,
          count: 0,
          list: [],
        }
      },
      mounted() {
        wow = new WOW({
          animateClass: 'animated',
          offset: 0
        });
        wow.init();
        this.loadActivities()
      },
      methods: {
        tabChange: function (index) {
          this.tab_index = index
          this.loadActivities()
        },
        loadActivities() {
          this.list = []
          let path = this.tab_index === 1 ? 'inactive_merchants' : 'active_merchants'
          //加载活动信息
          employee_get(path + '?page=' + this.page).then(res => {
            this.count = res.count
            this.list = res.list
          })
        }
      }
    });
  })
</script>
</html>
